iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Mobile Development

卡卡30天學 React Native系列 第 6

[ 卡卡DAY 6 ] - React Native style 必懂之 Flexbox 彈性盒子(上)

  • 分享至 

  • xImage
  •  

在手機裝置中, Flexbox 彈性盒子是一個重點樣式
倘若你不懂,就只能躺著被打 orz
React Native 與 css 的彈性盒子雷同大致上就只有幾點不同
style name
某些 default 值相反

這次以一個練習的方式來進行今天的文章分成上下篇
一起使用彈性盒子建立一個彩色的畫面

setting for flexbox practise

我們在 src/components 建立一個 Flex1.js,放入以下 code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Flex1() {
    return (
        <View style={styles.container}>
            <Text>漢堡</Text>
            <Text>三明治</Text>
            <Text>薯條</Text>
            <Text>熱狗</Text>
            <Text>太陽蛋</Text>
        </View>
    );
    }
const styles = StyleSheet.create({
    container: {
    },
});

再將檔案引入 App.js

import React from 'react';
import Flex1 from "./components/Flex1"
export default function App() {
    return (
        <Flex1 />
    );
}

https://ithelp.ithome.com.tw/upload/images/20210919/20142011gsrDEBmFPy.png

彈性盒子的原理

Flexbox 是一個可以讓元素膨脹來填充額外空間或著縮小適應更小的空間的 style。

首先我們先來了手機裝置中預設的主軸與次軸(剛好與 css 相反),如下圖:
https://ithelp.ithome.com.tw/upload/images/20210919/20142011Jbn3sUpsEx.png
##截自https://kknews.cc/code/grv4v8.html

當宣告元件屬性值為 flex 後,元件成了一個盒子,會出現主軸與次軸:

  • 主軸(main-axis):flexDirection 的設定,預設為垂直排列 column,也就是元件排列的方向
  • 次軸(cross axis):如果元件排列超過這個盒子的大小,你想要讓它換行,會遵 flexDirection 的設定相反方向換行,也就是主軸為垂直排列 column,換行將會是水平換行 row,所以次軸就是元件的換行方向

style in React Native vs HTML

Style Name React Native HTML
:focus, :hover, animations, keyframes, transitions none yes
display flex flex/grid/block/inline/inline-block
flexDirection(default) column row
alignItems(default) stretch flex-start
order none yes
flex flex: 1(只能有一個數值) flex: 1 1 auto

再補充一下:

  • React Native 中如果你想要某個元件佔 25%,另一個元件佔 75%,就用flex: 1/4與flex: 3/4分別指定兩個元件。
  • React Native 中自 0.42 版後才加入 flexGrow、flexShrink、flexBasis 這三個屬性,無法像css一樣簡寫在flex寫一起使用,需要分開寫!

Day 6 done 請期待 Day 7 的下篇 :P


上一篇
[ 卡卡 DAY 5 ] - Style in React Native - inline style vs StyleSheet
下一篇
[ 卡卡 DAY 7 ] - React Native style 必懂之 Flexbox彈性盒子(下)
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言